<template>
	<view class="content">
    <view>
      <u-tabs
        ref="uTabs" 
        :list="list" 
        :current="current" 
        :is-scroll="false" 
        bar-width="120"
        bar-height="4"
        height="100"
        :active-color="!current ? '#65bc65' : '#dd524d'"
        :bold="false"
        @change="tabsChange"></u-tabs>
    </view>
    <swiper class="swiper" :current="swiperCurrent" @change="changeSwiper">
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%;">
          <view class="">
            <view class="v-title">
              <text class="text">价格</text>
              <text class="small">当前盘口价格 {{ nowPrice }} CNY</text>
            </view>
            <view class="addcell-group">
              <view class="addcell-item" @click="showSelectType = true">
                <view class="addcell-title">
                  <text>定价方式</text>
                </view>
                <view class="addcell-content">
                  <view class="value-select">
                    <text class="text">{{ oMethod.label }}</text>
                    <view>
                      <u-icon name="arrow-down" size="28" color="#999"></u-icon>
                    </view>
                  </view>
                </view>
              </view>
              <view class="addcell-item">
                <view class="addcell-title">
                  <text>交易价格</text>
                </view>
                <view class="addcell-content">
                  <view class="value-input">
                    <u-input v-model="buyForm.price" placeholder="请输入交易价格" />
                  </view>
                </view>
              </view>
            </view>
            <view class="v-title">
              <text class="text">交易数额</text>
            </view>
            <view class="addcell-group">
              <view class="addcell-item">
                <view class="addcell-title">
                  <text>数量<text class="small">(USDT)</text></text>
                </view>
                <view class="addcell-content">
                  <view class="value-input">
                    <u-input  type="number" v-model="buyForm.nums" placeholder="请输入购买数量" />
                  </view>
                </view>
              </view>
              <view class="addcell-item">
                <view class="addcell-title">
                  <text>金额<text class="small">(CNY)</text></text>
                </view>
                <view class="addcell-content">
                  <view class="value-input">
                    <u-input :value="(buyForm.nums * buyForm.price).toFixed(2)" disabled placeholder="请输入购买金额" />
                  </view>
                </view>
              </view>
            </view>
            <u-gap height="90" bg-color="#131e30"></u-gap>
            <view class="v-operbtn">
              <view class="fot-btn">
                <u-button 
                  type="primary" 
                  :disabled="isDisabled"
                  ripple
                  @click="onRelease">发布委托单</u-button>
              </view>
              <view class="fotinfo">
                <text>现有:{{ userInfo.uMoney }}USDT</text>
                <text>平台服务费:0</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%;">
          <view class="">
            <view class="v-title">
              <text class="text">价格</text>
              <text class="small">当前盘口价格 {{ nowPrice }} CNY</text>
            </view>
            <view class="addcell-group">
              <view class="addcell-item" @click="showSelectType = true">
                <view class="addcell-title">
                  <text>定价方式</text>
                </view>
                <view class="addcell-content">
                  <view class="value-select">
                    <text class="text">{{ oMethod.label }}</text>
                    <view>
                      <u-icon name="arrow-down" size="28" color="#999"></u-icon>
                    </view>
                  </view>
                </view>
              </view>
              <view class="addcell-item">
                <view class="addcell-title">
                  <text>交易价格</text>
                </view>
                <view class="addcell-content">
                  <view class="value-input">
                    <u-input v-model="sellForm.price"  placeholder="请输入交易价格" />
                  </view>
                </view>
              </view>
            </view>
            <view class="v-title">
              <text class="text">交易数额</text>
            </view>
            <view class="addcell-group">
              <view class="addcell-item">
                <view class="addcell-title">
                  <text>数量<text class="small">(USDT)</text></text>
                </view>
                <view class="addcell-content">
                  <view class="value-input">
                    <u-input type="number" v-model="sellForm.nums" placeholder="请输入出售数量" />
                    <text class="btnall" @click="sellForm.nums = userInfo.uMoney">全部</text>
                  </view>
                </view>
              </view>
              <view class="addcell-item">
                <view class="addcell-title">
                  <text>金额<text class="small">(CNY)</text></text>
                </view>
                <view class="addcell-content">
                  <view class="value-input">
                    <u-input :value="(sellForm.nums * sellForm.price).toFixed(2)" disabled placeholder="请输入交易价格" />
                  </view>
                </view>
              </view>
            </view>
            <u-gap height="90" bg-color="#131e30"></u-gap>
            <view class="v-operbtn">
              <view class="fot-btn">
                <u-button 
                  type="primary" 
                  :disabled="isDisabledSell"
                  ripple
                  @click="onRelease">发布委托单</u-button>
              </view>
              <view class="fotinfo">
                <text>现有:{{ userInfo.uMoney }}USDT</text>
                <text>平台服务费:{{ userInfo.timoneyfei }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <!-- select -->
    <u-select v-model="showSelectType" :list="selectList.method" @confirm="onSelectMethod"></u-select>
    <u-select v-model="showSelectGrade" :list="selectList.grade" @confirm="onSelectGrade"></u-select>
    <u-select v-model="showSelectTime" :list="selectList.time" @confirm="onSelectTime"></u-select>
    <u-select v-model="showSelectPayTime" :list="selectList.payTime" @confirm="onSelectPayTime"></u-select>
	</view>
</template>

<script>
  import {
  	CUser
  } from '@/common/cache/user.js'
  var cache_user = new CUser();
  
	export default {
		data() {
			return {
        list: [{
          name: '我要购买'
        }, {
          name: '我要出售'
        }],
        current: 0,
        swiperCurrent: 0,
        showSelectType: false,
        showSelectGrade: false,
        showSelectTime: false,
        showSelectPayTime: false,
        oMethod: {
          value: 0,
          label: '固定价格'
        },
        oGrade: {
          value: 0,
          label: 'KYC1'
        },
        oTime: {
          value: -1,
          label: '请选择'
        },
        oPayTime: {
          value: 0,
          label: '10分钟内完成付款'
        },
        selectList: {
          method: [
            {
              value: 0,
              label: '固定价格'
            }
          ],
          grade: [
            {
              value: 0,
              label: 'KYC1'
            }
          ],
          time: [
            {
              value: 0,
              label: '2020-07-10'
            }
          ],
          payTime: [
            {
              value: 0,
              label: '10分钟内完成付款'
            }
          ]
        },
        buyForm: {
          price: '7',
          nums: ''
        },
        sellForm: {
          price: '7',
          nums: ''
        },
        // nowPrice: '7',
        userInfo: {}
			};
		},
    computed: {
      nowPrice () {
        return Number(this.$store.state.UsdtPrice).toFixed(2)
      },
      isDisabled () {
        return !this.buyForm.price || !this.buyForm.nums
      },
      isDisabledSell () {
        return !this.sellForm.price || !this.sellForm.nums
      }
    },
    onLoad (options) {
      this.getUser()
      this.buyForm.price = this.nowPrice
      this.sellForm.price = this.nowPrice
      uni.setNavigationBarTitle({
        title: `发布委托单(${options.type + '/CNY' || 'USDT/CNY'})`
      });
    },
		methods: {
      getUser () {
        cache_user.userinfo().then((res) => {
          this.userInfo = res
        })
      },
      /**
       * 发布委托单
       */
      onRelease () {
        uni.showLoading({
          mask: true
        })
		  
        let apiUrl = !this.swiperCurrent ? '/creaWantInvest' : '/wantUnInvestAction'
        let nums = !this.swiperCurrent ? this.buyForm.nums : this.sellForm.nums
        let price = !this.swiperCurrent ? this.buyForm.price : this.sellForm.price
        this.$api.http
        	.post(`assistance/CurrencyTransaction${apiUrl}`, {
        		ofUJiner: nums,
            ofPrice: price
        	})
          .then((res) => {
            uni.hideLoading()
            if (res.status == 200) {
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
            this.$api.msg(res.msg);
          })
      },
      onSelectPayTime (e) { // 选择付款时间
        this.oPayTime = e[0]
      },
      onSelectTime (e) { // 选择时间
        this.oTime = e[0]
      },
      onSelectGrade (e) { // 选择认证等级
        this.oGrade = e[0]
      },
      onSelectMethod (e) { // 选择定价方式
        this.oMethod = e[0]
      },
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			changeSwiper(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style lang="scss">
page {
  height: 100%;
}
.content {
  height: 100%;
}
.swiper {
  height: calc(100% - 100rpx);
}
.v-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 36rpx;
  background-color: $bg-gap;
  font-size: 28rpx;
  color: $color-theme;
  .small {
    font-size: 24rpx;
    color: $color-theme;
  }
}
.addcell-item {
  position: relative;
  padding: 17rpx 36rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  line-height: 54rpx;
  &.align-start {
    align-items: flex-start;
  }
  .addcell-title {
    width: 200rpx;
      color: $color-theme;
    .small {
      font-size: 24rpx;
    }
  }
  .addcell-content {
    flex: 1;
  }
  &::after {
    content: '';
    position: absolute;
    left: 36rpx;
    right: 0;
    bottom: 0;
    height: 1rpx;
    background-color: $color-theme;
  }
}

.value-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  .text {
    color: $text-color;
  }
  .value-icon {
    margin-left: auto;
    margin-right: 0;
  }
  .text-gary {
    color: $color-theme;
  }
}
.value-input {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  height: 54rpx;
  font-size: 32rpx;
}
.value-textarea {
  width: 100%;
  display: flex;
  text-align: left;
  min-height: 120rpx;
  font-size: 32rpx;
}
.v-operbtn {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  .fotinfo {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    padding: 6rpx 0;
    color: $color-theme;
  }
}
.btnall {
  color: $theme;
  font-size: 28rpx;
}
</style>
